<script setup>
import GoBackAndSearchNav from "@/components/GoBackAndSearchNav.vue";
import {onBeforeMount, ref, provide} from "vue";
import useOrderStore from "@/store/modules/OrderStore.js";
import OrderItem from "@/views/order/components/OrderItem.vue";
import {CANCEL, COMPLETE, WAIT_COMMENT, WAIT_DELIVERY, WAIT_PAY, WAIT_RECEIVE} from "@/constants/OrderStatus.js";
import {useRoute, useRouter, onBeforeRouteUpdate} from "vue-router";
import Null from "@/components/Null.vue";
import {MY_ROUTE} from "@/router/routes/my/my.js";

const route = useRoute()
const router = useRouter()

// 标签页
const tabMaxCnt = 6
const tabActive = ref(0)

// 手势事件处理
const swipeLeft = () => {
  if (tabActive.value < tabMaxCnt - 1) {
    tabActive.value += 1
  }
}
const swipeRight = () => {
  if (tabActive.value > 0) {
    tabActive.value -= 1
  }
}

const orderList_all = ref([])
const orderList_cancel = ref([])
const orderList_waitPay = ref([])
const orderList_waitDelivery = ref([])
const orderList_waitReceive = ref([])
const orderList_waitComment = ref([])
const orderList_complete = ref([])
const getOrderList = () => {
  tabActive.value = Number.parseInt(route.query.tabActive)
  orderList_all.value = useOrderStore().all
  orderList_cancel.value = orderList_all.value.filter(item => item.status === CANCEL)
  orderList_waitPay.value = orderList_all.value.filter(item => item.status === WAIT_PAY)
  orderList_waitDelivery.value = orderList_all.value.filter(item => item.status === WAIT_DELIVERY)
  orderList_waitReceive.value = orderList_all.value.filter(item => item.status === WAIT_RECEIVE)
  orderList_waitComment.value = orderList_all.value.filter(item => item.status === WAIT_COMMENT)
  orderList_complete.value = orderList_all.value.filter(item => item.status === COMPLETE)
}
provide('order' , {getOrderList})
onBeforeMount(() => {
  getOrderList()
})

const goBack = () => {
  router.push({name: MY_ROUTE})
}
</script>

<template>
  <div class="order-list" v-touch:swipe.left="swipeLeft" v-touch:swipe.right="swipeRight">
    <!--<GoBackAndSearchNav :title="'我的订单'" :placeholder="true"></GoBackAndSearchNav>-->
    <van-nav-bar :title="'我的订单'" left-text="返回" left-arrow fixed @click-left="goBack" placeholder></van-nav-bar>
    <van-tabs v-model:active="tabActive">
      <van-tab title="全部">
        <div class="pt-2">
          <OrderItem v-for="(item, idx) in orderList_all" :order="item"></OrderItem>
        </div>
        <Null v-if="orderList_all.length <= 0"></Null>
      </van-tab>
      <van-tab title="已取消">
        <div class="pt-2">
          <OrderItem v-for="(item, idx) in orderList_cancel" :order="item"></OrderItem>
        </div>
        <Null v-if="orderList_cancel.length <= 0"></Null>
      </van-tab>
      <van-tab title="待支付">
        <div class="pt-2">
          <OrderItem v-for="(item, idx) in orderList_waitPay" :order="item"></OrderItem>
        </div>
        <Null v-if="orderList_waitPay.length <= 0"></Null>
      </van-tab>
      <van-tab title="待发货">
        <div class="pt-2">
          <OrderItem v-for="(item, idx) in orderList_waitDelivery" :order="item"></OrderItem>
        </div>
        <Null v-if="orderList_waitDelivery.length <= 0"></Null>
      </van-tab>
      <van-tab title="待收货">
        <div class="pt-2">
          <OrderItem v-for="(item, idx) in orderList_waitReceive" :order="item"></OrderItem>
        </div>
        <Null v-if="orderList_waitReceive.length <= 0"></Null>
      </van-tab>
      <van-tab title="待评价">
        <div class="pt-2">
          <OrderItem v-for="(item, idx) in orderList_waitComment" :order="item"></OrderItem>
        </div>
        <Null v-if="orderList_waitComment.length <= 0"></Null>
      </van-tab>
      <van-tab title="已完成">
        <div class="pt-2">
          <OrderItem v-for="(item, idx) in orderList_complete" :order="item"></OrderItem>
        </div>
        <Null v-if="orderList_complete.length <= 0"></Null>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">

</style>